<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>场景移动</title>
    <style>
        body {
            background-color: black;
        }
        
        #canvas {
            border: 2px solid white;
            position: absolute;
            width: 1000px;
            height: 700px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.querySelector("#canvas")
        const ctx = canvas.getContext('2d')
        const CANVAS_WIDTH = canvas.width = 1000
        const CANVAS_HEIGHT = canvas.height = 700

        const bgLayer1 = new Image()
        bgLayer1.src = 'imgs/layer-1.png'

        const bgLayer2 = new Image()
        bgLayer2.src = 'imgs/layer-2.png'

        const bgLayer3 = new Image()
        bgLayer3.src = 'imgs/layer-3.png'

        const bgLayer4 = new Image()
        bgLayer4.src = 'imgs/layer-4.png'

        const bgLayer5 = new Image()
        bgLayer5.src = 'imgs/layer-5.png'


        let x1 = 0;
        let x2 = 2400;
        let gameSpeed = 10

        function animate() {
            ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT)
            ctx.drawImage(bgLayer4, x1, 0)
            ctx.drawImage(bgLayer4, x2, 0)


            if (x1 < -2400) {
                x1 = 2400 + x2
            } else {
                x1 -= gameSpeed
            }

            if (x2 < -2400) {
                x2 - 2400 + x1 - gameSpeed
            } else {
                x2 -= gameSpeed
            }

            window.requestAnimationFrame(animate)
        }

        animate()
    </script>
</body>

</html>